/* (A) STANDARD ROW HEIGHT */
.vwrap, .vitem {
  height: 30px;
  line-height: 30px;
        color: #00e000;
}
 a {
         color: #b3ffb3;
 }
/* (B) FIXED WRAPPER */
.vwrap {
  overflow: hidden; /* HIDE SCROLL BAR */
  background: #eee;
}
/* (C) TICKER ITEMS */
.vitem { text-align: center; }
 
/* (D) ANIMATION - MOVE ITEMS FROM TOP TO BOTTOM */
/* CHANGE KEYFRAMES IF YOU ADD/REMOVE ITEMS */
.vmove { position: relative; }
@keyframes tickerv {
  0% { bottom: 0; } /* FIRST ITEM */
  30% { bottom: 30px; } /* SECOND ITEM */
  60% { bottom: 60px; } /* THIRD ITEM */
  90% { bottom: 90px; } /* FORTH ITEM */
  100% { bottom: 0; } /* BACK TO FIRST */
}
.vmove {
  animation-name: tickerv;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, 0, .5, 0);
}
.vmove:hover { animation-play-state: paused; }
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa&family=Barlow:wght@100;400&display=swap');
:root {
    --navBackground: #2e2e2e;
    --navColorDisabled: #cecece;
    --navColorEnabled: #ffffff;
    --btnBgColor: #ff4d00;
    --deColor: #ff5e00;
    --BackColor: #ffcb97;
}

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background-color: var(--btnBgColor);
}

::-webkit-scrollbar-thumb:hover {
    border-radius: 50px;
    background-color: var(--BackColor);
}

::selection {
    color: var(--navColorEnabled);
    background-color: var(--btnBgColor);
}

body {
    /* font-family: 'Aref Ruqaa', serif; */
    font-family: 'Barlow', sans-serif;
}


/* <nav> */

nav {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 1rem 1rem;
    color: var(--navColorEnabled);
    background-color: var(--navBackground);
    position: fixed;
    top: 0;
    width: 99%;
}

nav .logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
}

nav .logo i {
    padding-right: 0.25rem;
}

nav .nav-items {
    display: flex;
    list-style-type: none;
}

nav .nav-items .nav-item {
    padding: 0.25rem 0.35rem;
}

nav .nav-items .nav-item a {
    text-decoration: none;
    color: var(--navColorDisabled);
}

nav .nav-items .nav-item a:hover {
    border-bottom: 2px solid var(--deColor);
    color: var(--navColorEnabled);
}


/* </nav> */


/* <page> */

.page {
    font-size: x-large;
}


/* <welcome> */

.welcome {
    margin-top: 300px;
    margin-left: 100px
}

.link {
    color: unset;
    text-decoration: none;
}

.link:hover {
    color: var(--deColor);
    text-decoration: underline;
}

.s {
    border-bottom: 2px solid var(--deColor);
}

.s-l {
    border-left: 5px solid var(--deColor);
}

.deColor {
    color: var(--deColor)
}


/* </welcome> */


/* <about> */

.about {
    margin-top: 350px;
    margin-left: 60px;
    margin-right: 200px;
}


/* </about> */


/* <skills> */

.skills {
    margin-top: 300px;
    text-align: center;
}

.container-1 {
    width: 100%;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 30px;
    text-decoration: none;
}

.skill-bars {
    max-width: 450px;
    margin-left: auto 0;
    text-align: center;
    display: inline;
    padding-bottom: 0px;
}

.progress-bar {
    width: 30%;
    margin: 1em auto;
    padding-top: 0px;
    padding-bottom: 10px;
}

.what-skill {
    font-size: .85em;
    font-family: sans-serif;
    margin-bottom: 0.25em;
    text-align: left;
}

.speech-bubble {
    font-size: 0.80em;
    line-height: 2.3em;
    position: absolute;
    top: -3em;
    text-align: center;
    min-width: 3em;
    border-radius: 0.4em;
    display: none;
    color: white;
}

.html {
    left: calc(90% - 1.5em);
}

.jquery {
    left: calc(85% - 1.5em);
}

.speech-bubble:after {
    border: 0.5em solid transparent;
    content: "";
    margin-left: -0.5em;
    position: absolute;
    top: 100%;
    left: 50%;
}

.bar-background {
    height: 1.25em;
    background: #EEEEEE;
    position: relative;
    border-radius: 0.3em;
}

.bar-inner {
    width: 0;
    height: 1.25em;
    border-radius: 0.3em;
}

.htm,
.html {
    width: 90%;
    background: var(--deColor);
}

.html:after {
    border-top-color: var(--BackColor);
}

.cs,
.css {
    width: 80%;
    background: var(--deColor);
}

.css:after {
    border-top-color: var(--BackColor);
}

.js,
.javascript {
    width: 20%;
    background: var(--deColor);
}

.py,
.python {
    width: 5%;
    background: var(--deColor);
}

.javascript:after {
    border-top-color: var(--BackColor);
}


/* </skills> */


/* <projects> */


/* </projects> */


/* <footer> */

.footer {
    margin-top: 10px;
}

.footer,
.footer span {
    color: var(--navColorDisabled);
    background-color: var(--navBackground);
    padding: 10px;
    text-align: center;
    overflow: hidden;
}

.footer ul {
    list-style: none;
    background-color: var(--navBackground);
    padding-left: 0;
    margin: 10px;
    float: right;
}

.footer i {
    color: var(--navColorDisabled);
    background-color: var(--navBackground);
}

.footer i:hover {
    color: var(--deColor);
}

.footer ul li {
    display: inline-block;
}

.f {
    float: left;
}


/* </footer> */


/* <mobile> */

@media only screen and (max-width: 600px) {
    nav {
        margin: auto auto;
        padding: 0.75rem 0.75rem;
    }
    nav .logo {
        font-size: 1rem;
    }
    nav .logo i {
        padding-right: 0.15rem;
    }
    nav .nav-items .nav-item {
        padding: 0.15rem 0.25rem;
    }
    nav .nav-items .nav-item a:hover {
        border-bottom: 3px solid var(--deColor);
        color: var(--navColorEnabled);
    }
    /* </nav> */
    /* <page> */
    .page {
        font-size: x-large;
    }
    /* <about> */
    .about {
        margin-top: 350px;
        margin-left: 30px;
        margin-right: 200px;
    }
    /* </about> */
    /* <skills> */
    .skills {
        margin-top: 300px;
        text-align: center;
    }
    .container-1 {
        width: 100%;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 30px;
        text-decoration: none;
    }
    .skill-bars {
        max-width: 450px;
        margin-left: auto 0;
        text-align: center;
        display: inline;
        padding-bottom: 0px;
    }
    .progress-bar {
        width: 70%;
        margin: 1em auto;
        padding-top: 0px;
        padding-bottom: 10px;
    }
    .what-skill {
        font-size: .85em;
        font-family: sans-serif;
        margin-bottom: 0.25em;
        text-align: left;
    }
    .speech-bubble {
        font-size: 0.80em;
        line-height: 2.3em;
        position: absolute;
        top: -3em;
        text-align: center;
        min-width: 3em;
        border-radius: 0.4em;
        display: none;
        color: white;
    }
    .html {
        left: calc(90% - 1.5em);
    }
    .javascript {
        left: calc(85% - 1.5em);
    }
    .speech-bubble:after {
        border: 0.5em solid transparent;
        content: "";
        margin-left: -0.5em;
        position: absolute;
        top: 100%;
        left: 50%;
    }
    .bar-background {
        height: 1.25em;
        background: #EEEEEE;
        position: relative;
        border-radius: 0.3em;
    }
    .bar-inner {
        width: 0;
        height: 1.25em;
        border-radius: 0.3em;
    }
    .htm,
    .html {
        width: 90%;
        background: var(--deColor);
    }
    .html:after {
        border-top-color: #000000;
    }
    .cs,
    .css {
        width: 80%;
        background: var(--deColor);
    }
    .css:after {
        border-top-color: #000000;
    }
    .js,
    .javascript {
        width: 20%;
        background: var(--deColor);
    }
    .javascript:after {
        border-top-color: #000000;
    }
    /* </skills> */
    /* </page> */
}

@media only screen and (max-width: 400px) {
    nav {
        margin: auto auto;
        padding: 0.75rem 0.75rem;
    }
    nav .logo {
        font-size: 1rem;
    }
    nav .logo i {
        padding-right: 0.15rem;
    }
    nav .nav-items .nav-item {
        padding: 0.15rem 0.25rem;
    }
    nav .nav-items .nav-item a:hover {
        border-bottom: 3px solid var(--deColor);
        color: var(--navColorEnabled);
    }
    /* </nav> */
    /* <welcome> */
    .welcome {
        margin-top: 200px;
        margin-left: 50px
    }
    /* </welcome> */
    /* <page> */
    .page {
        font-size: x-large;
    }
    /* <about> */
    .about {
        margin-top: 200px;
        margin-left: 30px;
        margin-right: 30px;
    }
    /* </about> */
    /* <skills> */
    .skills {
        margin-top: 200px;
        text-align: center;
    }
    .container-1 {
        width: 100%;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 30px;
        text-decoration: none;
    }
    .skill-bars {
        max-width: 450px;
        margin-left: auto 0;
        text-align: center;
        display: inline;
        padding-bottom: 0px;
    }
    .progress-bar {
        width: 70%;
        margin: 1em auto;
        padding-top: 0px;
        padding-bottom: 10px;
    }
    .what-skill {
        font-size: .85em;
        font-family: sans-serif;
        margin-bottom: 0.25em;
        text-align: left;
    }
    .speech-bubble {
        font-size: 0.80em;
        line-height: 2.3em;
        position: absolute;
        top: -3em;
        text-align: center;
        min-width: 3em;
        border-radius: 0.4em;
        display: none;
        color: white;
    }
    .html {
        left: calc(90% - 1.5em);
    }
    .javascript {
        left: calc(85% - 1.5em);
    }
    .speech-bubble:after {
        border: 0.5em solid transparent;
        content: "";
        margin-left: -0.5em;
        position: absolute;
        top: 100%;
        left: 50%;
    }
    .bar-background {
        height: 1.25em;
        background: #EEEEEE;
        position: relative;
        border-radius: 0.3em;
    }
    .bar-inner {
        width: 0;
        height: 1.25em;
        border-radius: 0.3em;
    }
    .htm,
    .html {
        width: 90%;
        background: var(--deColor);
    }
    .html:after {
        border-top-color: #000000;
    }
    .cs,
    .css {
        width: 80%;
        background: var(--deColor);
    }
    .css:after {
        border-top-color: #000000;
    }
    .js,
    .javascript {
        width: 20%;
        background: var(--deColor);
    }
    .javascript:after {
        border-top-color: #000000;
    }
    /* </skills> */
    /* </page> */
}


/* </mobile> */